<template>
  <div class="file-parsing">
    <el-row>
      <el-col :span="24">
        <dynForm :info-form="infoForm" :search-tags="searchTags" :select-list="selectList">
          <div>
            <el-form-item :label="$t('lotId')">
              <el-input v-model="infoForm.lotId" :placeholder="`${$t('pleaseInput')}${$t('lotId')}`" clearable/>
            </el-form-item>
            <el-form-item label="wafer号">
              <el-input v-model="infoForm.waferId" :placeholder="`${$t('pleaseInput')}wafer号`" clearable/>
            </el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="doSearch"
            >
              {{ $t('search') }}</el-button>
          </div>
        </dynForm>
      </el-col>
    </el-row>
    <div class="table-buttons">
      <!-- v-btnPermission:add -->
      <el-button
        v-btnPermission:add
        :disabled="DeleteDisabled"
        type="primary"
        icon="el-icon-plus"
        @click="doParsing">
        {{ $t('parsing') }}</el-button>
      <el-button
        :disabled="DeleteDisabled"
        type="danger"
        icon="el-icon-delete"
        @click="doDelete"
      >{{ $t("delete") }}</el-button
      >
    </div>
    <el-card shadow="never">
      <el-row>
        <dynTable
          ref="dynTable"
          :loading="tableLoading"
          :table-data="tableData"
          :table-columns="tableColumns"
          :handle-selection-change="handleSelectionChange"
          :row-click="rowClick"
        />
      </el-row>
      <pagination
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        :total="total"
        @pagination="onPagination"
      />
    </el-card>
  </div>
</template>
<script>
import mySetting from '@/mixins/mySetting'
import { getList, doParsingFile, handleDelete } from '@/api/ruleConfig/fileParsing'
import { eqpidnamelist } from '@/api/equipment/eqpbase'

export default {
  name: 'FileParsing',
  mixins: [mySetting],
  data() {
    const parsingStatus = [
      { name: '未解析', id: 0, type: 'info' },
      { name: '正在解析', id: 1, type: '' },
      { name: '解析成功', id: 2, type: 'success' },
      { name: '解析失败', id: 3, type: 'danger' }
    ]
    const searchTags = [
      { label: this.$t('eqpName'), prop: 'eqpId', tag: 'DynSelect' },
      { label: this.$t('lotId'), prop: 'lotId', tag: 'DynInput' },
      // { label: 'wafer号', prop: 'waferId', tag: 'DynInput' },
      { label: this.$t('fileName'), prop: 'fileName', tag: 'DynInput' },
      { label: this.$t('parsingStatus'), prop: 'result', tag: 'DynSelect' }
    ]
    const tableColumns = [
      { prop: '', label: '', type: 'selection' },
      { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
        return (
          <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
        )
      } },
      { prop: 'eqpName', label: this.$t('eqpName') },
      { prop: 'lotId', label: this.$t('lotId') },
      { prop: 'waferId', label: 'wafer号' },
      // { prop: 'eqpType', label: this.$t('engineType') },
      { prop: 'fileName', label: this.$t('fileName'), width: '250px' },
      { prop: 'createTime', label: this.$t('FileUploadTime') },
      { prop: 'result', label: this.$t('parsingStatus'), templete: (_scope) => {
        return (
          <el-tag type={parsingStatus[_scope.row.result].type} effect='dark'>
            {parsingStatus[_scope.row.result].name}
          </el-tag>
        )
      } },
      { prop: 'analysisTime', label: this.$t('FileParsingTime') },
      { prop: 'description', label: this.$t('status_description') },
      { prop: 'remark', label: this.$t('remark') }
    ]
    return {
      infoForm: {},
      searchTags: Object.freeze(searchTags),
      tableColumns: Object.freeze(tableColumns),
      selectList: {
        'result': parsingStatus
      },
      tableLoading: true
    }
  },
  created() {
    this.initList()
    this.getEqpnamelist()
  },
  methods: {
    async initList() {
      const res = await getList(this.$clearNull({ ...this.listQuery, ...this.infoForm }))
      this.tableData = res.data
      this.total = res.total
      this.tableLoading = false
    },
    doSearch() {
      this.listQuery.page = 1
      this.initList()
    },
    doDelete() {
      this.$confirm(
        `${this.$t('confirmDelete')}${this.multipleSelection.length}${this.$t(
          'recordCount'
        )}?`,
        this.$t('tip'),
        {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }
      ).then(() => {
        const ids = this.multipleSelection.map((ele) => ele.id)
        handleDelete({ ids }).then((res) => {
          this.$betterTips(res, this.setOnePage, this.initList)
        })
      })
    },
    doParsing() {
      const ids = this.multipleSelection.map(ele => ele.id)
      doParsingFile({ ids }).then(res => {
        this.$betterTips(res, this.initList)
      })
    },
    onPagination(page) {
      this.listQuery = page
      this.initList()
    },
    handleSelectionChange(row) {
      this.multipleSelection = row
    },
    rowClick(row) {
      this.$refs.dynTable.$refs.multipleTable.toggleRowSelection(row)
    },
    async getEqpnamelist() {
      const res = await eqpidnamelist()
      this.$set(this.selectList, 'eqpId', res.data)
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/defaultStyle.scss";
</style>
